[React] setState 비동기식 async 사용하는 방법

React의 state 상태 관리를 변경하기 위해서 setState를 사용할 수 있습니다. 이때 비동기, async로 setState를 호출하려면 어떻게 해야 하는지 알아봅니다.

# 비동기로 setState() 호출하기, async

먼저 비동기 setState()를 호출하기 위해서 아래에서는 다음의 방법을 사용하려고 합니다.

async, await, Promise


모두 비동기식 호출에 사용되는 API들입니다. async와 await는 페어로 함께 사용되며 Promise 객체 역시 업데이트 후 다음 코드로 이동, resolve하기 위해서 필요합니다.

이제 아래에서 순서대로 알아보려고 합니다. 가장 먼저 상태값을 변경하는 함수 updateState를 만듭니다.

updateState 함수의 내부를 보면 Promise()를 사용하여 setState()로 업데이트 전체를 랩핑합니다. 그리고 상태 값의 업데이트가 끝난 후 콜백함수가 실행되는데 이 때 resolve('Updated')로 프로미스를 resolve() 하였습니다.

참고로 setState는 두 번째 인자로 콜백함수를 실행할 수 있습니다. 이 콜백함수는 state 값이 업데이트 된 후에 실행되게 됩니다.

setState(변경할 상태 값, 변경 후 실행 할 콜백함수)
 
여기까지 updateState() 함수는 모두 끝났습니다. 즉 상태값 업데이트 과정은 모두 끝나게 됩니다. 아래는 이 함수를 호출하고 결과를 받아 'Updated'라고 출력하는 함수 showResult 함수를 만들어봅니다.

aync 함수 내부에 await를 사용하여 아까 만든 updateState()를 호출하였습니다. 그리고 아래에는 alert()을 사용해 메시지를 출력 후 종료됩니다.


@ 작성된 전체 코드 살펴보기

다시 한 번 전체 코드를 나타내면 아래와 같죠.

여기까지 모든 과정은 끝이 났습니다.

! 마치면서

그런데 왜 위와 같이 setState()를 비동기식으로 사용할까요? 그 이유를 모른다면 위와 같은 코드가 왜 필요한지 언제 필요한지 알 수 없을 것입니다. 간략하게 얘기하면 setState()를 사용하면 state 상태값이 그 즉시 업데이트되고 다음 줄이 실행되지 않습니다. 즉  setState() 함수 역시 비동기식으로 사용된다는 의미입니다.

만약 setState() 바로 다음 줄에 변경된 상태 값을 출력하거나 그 상태 값에 따른 조작이 필요할 때 문제가 발생할 수 있습니다. 즉 다음 줄의 state값이 업데이트 된 이 후라고 단언할 수 없기 때문이죠. 이런 이유로 위와 같이 비동기식으로 update 함수를 만들었던 것을 이해할 수 있어야 하겠습니다.